<template>
  <div class="content">
    <div style="height:20%"></div>
    <div class="blocker">
      <div class="instructions">
        <p style="font-size:30px;text-align:center;font-weight:bold">指导语</p>
        <p style="font-size:25px;text-align:left">
           欢迎参加我们的实验。请你首先确定
           <span style="color: red">关闭了输入法。</span>接下来，请你将
           <span style="color: red">习惯用手（利手）的食指和无名指放在键盘</span>上，以按照要求进行按键反应。
            </p>
        <p style="font-size:25px;text-align:left">请在保证<span style="color: red">正确率</span>
        的前提下，<span style="color: red">快速</span>的做出反应。</p>
        <p style="font-size:25px;text-align:left">准备好后，请按空格键，进入测试。</p>
      </div>
    </div>
    <div class="back"></div>
  </div>
</template>

<script>
import {useRouter} from "vue-router";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Test1",
  data() {
    return {
      router: useRouter(),
    };
  },

  created: function () {
    const _this = this;
    document.onkeydown = function (event) {
      let key = event.key;
      if (key === " ") {
          _this.router.push("/test1/round1")
        } else {
          message.error("请输入正确的键位");
        }
    };
  },
}

</script>

<style scoped>
.content {
  width: calc(100% - 200px)!important;
  height: 100%;
  /*background-color: rgba(0, 0, 0, 0.5);*/
  display: flex;
  cursor: pointer;
  position: absolute;
  flex-direction: column;
}

.blocker {
  justify-content: center;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 33%;
}

.instructions {
  width: 60%;
  /*color: #ffffff;*/
}
</style>
